{% extends "fronted/base.html" %}

{% block main %}
    <div class="box box-primary" style="float: left; width: 75%;">
        <div class="box-header with-border"><h3 class="box-title">题目列表</h3></div>
        <div class="box-body table-responsive no-padding">
            <table class="table table-hover">
                <tbody>
                    <tr>
                        <td>#</td>
                        <td>题目名称</td>
                    </tr>
                    {% for problem in private.problems %}
                        <tr>
                            <td>{{ problem.id }}</td>
                            <td><a href="{{ url_for("fronted.problem_show", problem_id = problem.id) }}">{{ problem.name }}</a></td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="box-footer clearfix">
              <ul class="pagination pagination-sm no-margin">
                {% if private.last_button_url %}
                    <li><a href="{{ private.last_button_url }}">←上页</a></li>
                {% endif %}
                {% if private.next_button_url %}
                    <li><a href="{{ private.next_button_url }}">下页→</a></li>
                {% endif %}
              </ul>
        </div>
    </div>
    <div class="box box-primary" style="float: right; width: 24%;">
        <div class="box-header with-border"><h3 class="box-title">跳转题目</h3></div>
        <div class="box-body table-responsive">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="题目编号" id="prob_id">
            </div>
            <div class="col-xs-4">
                <button type="submit" class="btn btn-primary btn-flat" onclick="jump()">跳转</button>
            </div>
        </div>
    </div>
    <script>
        function jump() {
            let prob_id = document.getElementById("prob_id").value;
            window.location.href = "{{ url_for("fronted.problem_show", problem_id = prob_id) }}" + prob_id;
        }
    </script>
{% endblock%}